<template>
  <van-nav-bar
    title="个人信息"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-form @failed="onFailed" @submit="editUserInfo()">
    <van-cell-group inset>
      <van-field v-model="form.nickname" name="pattern" label="昵称" />
      <van-field v-model="form.email" name="validator" label="邮箱" />
      <van-field
        v-model="form.phoneNumber"
        name="validatorMessage"
        label="手机号"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        style="background-color: #ead7c6; border: none"
        round
        block
        type="primary"
        native-type="submit"
      >
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script>
import router from "../../router";

export default {
  data() {
    return {
      form: {
        nickname: "",
        email: "",
        phoneNumber: "",
      },
      editUserInfoQueryInfo: {
        methodName: "mineInfo_editUserInfo",
        data: {},
      },
      getUserInfoQueryInfo: {
        methodName: "mineInfo_getUserInfo",
        data: "",
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    onClickLeft() {
      router.back();
    },
    // 获取用户信息
    async getUserInfo() {
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.getUserInfoQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      let form = JSON.parse(res.data);
      this.form.nickname = form.nickname;
      this.form.email = form.email;
      this.form.phoneNumber = form.phoneNumber;
    },
    // 编辑用户信息
    async editUserInfo() {
      this.editUserInfoQueryInfo.data = this.form;
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.editUserInfoQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.getUserInfo();
    },
    onFailed(error) {
      console.log(error);
    },
  },
};
</script>

<style>
</style>